<template>
	<view class=" ">
		<view class="bg-white  p-10">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="p-t-10 p-b-10">
					<view class="banmi_flex a-c" style="flex-wrap: wrap;">
						<view class="m-5 banmi_flex a-c">
							<text class="f-14 ">访客类型:</text>
							<uni-data-select class="m-l-10" @change="change_status" :clear="false" :value="status"
								:localdata="localdata_status">
							</uni-data-select>
						</view>

						<view class="m-5 banmi_flex a-c">
							<text class="f-14 ">选择日期</text>
							<uni-datetime-picker class="m-l-10" type="date" :value="day" @change="confirm_time" />
						</view>
						<view class="m-5">
							<button @click="on_search" type="primary" size="mini">查询</button>
						</view>

						<view class="m-5">
							<button @click="on_search_resetting" style="background-color: #C0C0C0;" type="primary"
								size="mini">重置</button>
						</view>

						<view class="m-5 c-7 f-14">
							访问记录保存在根目录/runtime/visitor/
						</view>
					</view>
				</view>


				<uni-table style="min-height: 72vh;" border stripe type="selection" class="m-5" :type="'2'"
					@selection-change="selectionData">
					<uni-tr>

						<uni-th align="center">来访IP</uni-th>
						<uni-th align="center">来访时间</uni-th>
						<uni-th align="center">设备信息</uni-th>
						<uni-th align="center">用户id</uni-th>
						<uni-th align="center">受访页面</uni-th>
						<uni-th align="center">受访接口</uni-th>
						<uni-th align="center">受访应用</uni-th>
					</uni-tr>

					<uni-tr v-for="(vo,index) in list" :key="index">

						<uni-td align="center">
							{{vo[0]}}

						</uni-td>
						<uni-td align="center">
							{{vo[2]}}
						</uni-td>
						<uni-td align="center">
							{{vo[6]}};{{vo[3]}};{{vo[4]}};{{vo[9]}};{{vo[12]}};{{vo[10]}};{{vo[13]}}
						</uni-td>
						<uni-td align="center">
							{{vo[8]}}
						</uni-td>
						<uni-td align="center">
							{{vo[5]}}
						</uni-td>
						<uni-td align="center">
							{{vo[1]}}
						</uni-td>
						<uni-td align="center">
							{{vo[7]}}
						</uni-td>


					</uni-tr>
				</uni-table>

				<view class="p-10" v-if="PageCount>0">
					<view class="m-l-10 banmi_flex a-c">
						<text class="c-7 f-14">共{{PageCount}}页</text>
						<view class="" @click="on_previous">
							<button class="banmi_flex a-c j-c m-l-20"
								style="background-color: #fff;width: 30px;height: 25px;">
								<uni-icons color="#666" size="16" type="left" />
							</button>
						</view>
						<view class="banmi_flex a-c">
							<button @click="on_page(index+1)" class="banmi_flex a-c j-c m-l-10"
								v-if="page  > (index - 3) && page < (index + 3)"
								:class="index+1==page?'page_Selected':'Nopage_Selected'"
								v-for="(item,index) in PageCount">
								<text class="  f-14">{{index+1}}</text>
							</button>
						</view>
						<view class="m-l-10">
							<button @click="on_next()" class="banmi_flex a-c j-c"
								style="background-color: #fff;width: 30px;height: 25px;">
								<uni-icons color="#666" size="16" type="right" />
							</button>
						</view>


					</view>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {


		},
		data() {
			return {
				list: [],
				last_page: 0,
				PageCount: 0,
				page: 1,
				day: "",
				status: 0,

				localdata_status: [{
						"value": 0,
						"text": "用户端访问明细",
					},
					{
						"value": 1,
						"text": "管理端访问明细",
					},
				],
			}
		},
		onLoad() {

			this.rot();
		},
		methods: {

			pad(number) {
				return number < 10 ? '0' + number : number;
			},
			rot() {
				const today = new Date();
				const year = today.getFullYear(); // 年份
				const month = this.pad(today.getMonth() + 1); // 月份，注意月份从0开始，所以要加1
				const day = this.pad(today.getDate()); // 日期
				this.day = year + "-" + month + "-" + day
				this.page = 1;

				this.init();
			},
			confirm_time(e) {
				this.day = e
				this.page = 1;
				this.init();
			},
			on_page(page) {
				if (this.page == page) {
					return
				}
				this.page = page;
				this.init();
			},
			on_next() {
				if (this.page >= this.PageCount) {
					return
				}
				this.page++
				this.init();
			},
			on_previous() {
				if (this.page == 1) {
					return
				}
				this.page--
				this.init();
			},
			change_status(val) {
				this.status = val
			},


			on_search() {

				this.page = 1;
				this.init();
			},
			on_search_resetting() {
				this.status = 0;
				this.rot();
			},
			async init() {
				let requestParams = {
					day: this.day,
					page: this.page,
					status: this.status
				};
				const ret = await this.Banmikeji.Sdetailed(requestParams);
				this.list = ret.data.list;
				this.PageCount = ret.data.PageCount;
			},
		}
	}
</script>

<style>
	button {
		padding: 5rpx 10rpx;
	}

	button::after {
		border: none;
		background-color: none;

	}

	.operate_right {
		position: sticky;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.m-5 {
		margin: 5px;
	}

	.page_Selected {
		background-color: #007aff;
		width: 30px;
		height: 25px;
		border-radius: 5px;
		color: #fff;
	}

	.Nopage_Selected {
		background-color: #fff;
		width: 30px;
		height: 25px;
		border-radius: 5px;
		color: #000;
	}
</style>